<template>
    <div v-if="display" id="design">
        
        <!-- 头部 -->
        <Top 
            :todo="todo"
         @save="saveTemplate"></Top>
         <!-- <div v-for="item in errMsg" :key="item">
            <div>{{item}}</div>
         </div> -->
        <!-- 画布 -->
        <div class="editor" ref="editorSvg" @click="handleClear">
            <div id="drawing" ref="drawing" @click.stop>
                <div id="codebox" :style="codeBoxComputed" @touchstart.stop="handleRecord">
                    <div 
                        @click.stop
                    >
                        <div class="codebox-btn lt"
                            @touchstart.stop
                            @click.stop="handleDelete"
                        >
                            <img src="/img/cha.png" alt="">
                        </div>
                        <div  class="codebox-btn lb"
                            @touchstart.stop="handleRecord" 
                        >
                           <img src="/img/xuanzhuan.png" alt="">
                        </div>
                        <div class="codebox-btn rt"
                            @touchstart.stop
                            @click.stop="handleClone"
                        ><img src="/img/copy.png" alt=""></div>
                        <div class="codebox-btn rb"
                            @touchstart.stop="handleRecord" 
                        >
                            <img src="/img/resize.png" alt="">
                        </div>
                    </div>
                    <!-- <div v-if="setTextAttr" v-html="textObj.arrList.join('\n')" :style="fontStyle"></div> -->
                </div>
            </div>
            <!-- <div class="editor-mask" v-if="textToggle" @click.stop></div> -->
        </div>
        <!-- 底部工具栏 -->
        <div class="dsign-bottom">
            <!-- 默认功能 -->
            <div v-show="toolType == 'all'" class="index">
                <div class="index-title">
                    <div></div>
                    <div>点击任意元素开始编辑</div>
                </div>
                <ul class="index-content">
                    <li>
                        <div class="index-icon" @click="toolType = 'page'">
                            <i class="iconfont icon-yemian"></i>
                        </div>
                        <span>页面管理</span>
                    </li>
                    <li>
                        <div class="index-icon add-icon" @click="toolType = 'add'">
                            <i class="iconfont icon-ic_join_dialing_norm"></i>
                        </div>
                        <span>添加</span>
                    </li>
                    <li>
                        <div class="index-icon" @click="changeToolType('bg')">
                            <i class="iconfont icon-beijing"></i>
                        </div>
                        <span>修改背景</span>
                    </li>
                </ul>
            </div>
            <!-- 页面管理 -->
            <transition-group name="animation-down" tag="div" style="height:100%">
            <div v-show="toolType == 'page'" key="page" class="page-manage">
                <div class="page-top" @click.stop>
                    <span class="page-btn iconfont icon-ic_join_dialing_norm" @click="addTemplatePage()"></span>
                    <!-- <span class="page-btn iconfont icon-move-left"></span>
                    <span class="page-btn iconfont icon-move-left" style="transform: scale(-1);"></span> -->
                    <span class="page-btn iconfont icon-shanchu" @click="deleteTemplatePage"></span>
                    <span class="page-btn iconfont icon-fuzhi" @click="copyTemplatePage"></span>
                </div>
                <div class="page-content">
                    <div
                        @click="handleTogglePage(index)"
                        :class="['page-content-item', pageNum == index ? 'page-acitve' : '']"
                        v-for="(p, index) in pages"
                        :key="index"
                    >
                        <div v-html="p.SvgContent"></div>
                    </div>
                </div>
                <div class="page-bottom">
                    <!-- <span
                        @click=" toolType = 'all'"
                        class="page-bottom-icon iconfont icon-cha"
                        style="float:left; font-size: 4vmin;"
                    ></span> -->
                    <span>页面管理</span>
                    <span
                        @click=" toolType = 'all'"
                        class="page-bottom-icon iconfont icon-queding"
                        style="float: right; font-size: 6vmin;"
                    ></span>
                </div>
            </div>
            <!-- 添加 -->
            <div v-show="toolType == 'add'" key="add" class="add-select">
                <div class="select-item">
                    <ul>
                        <li>
                            <div @click="openDialogModel()" class="select-item-icon">
                                <i class="iconfont icon-wenzi"></i>
                            </div>
                            <span>添加文字</span>
                        </li>
                        <li>
                            <div class="select-item-icon" @click="handleImage('add')">
                                <i class="iconfont icon-tupian"></i>
                            </div>
                            <span>添加图片</span>
                        </li>
                    </ul>
                </div>
                <div class="select-bottom" @click="toolType = 'all'">
                    <i class="iconfont icon-cha"></i>
                </div>
            </div>
            
            <!-- 修改背景 -->
            
            <div v-show="toolType == 'bg'" key="bg" class="panel">
                <div class="panel-top-overflow">
                    <ul class="panel-top">
                        <li
                            :class="['label-item', bgToggle ? 'label-active' : '']"
                            @click="toggleBackground"
                        >图片背景</li>
                        <li
                            :class="['label-item', bgToggle ? '' : 'label-active']"
                            @click="toggleBackground"
                        >纯色背景</li>
                    </ul>
                </div>
                <div class="panel-content" style="padding: 8vmin 0 8vmin 4vmin;">
                    <div class="panel-list" v-if="bgToggle">
                        <div class="local-upload" @click="uploadImage('bg')">
                            <div class="local-upload-icon">
                                <i class="iconfont icon-wushanguanwangziti-"></i>
                            </div>
                            <div>本地上传</div>
                        </div>
                        <div class="panel-list-item" ref="bg" @scroll="getMoreBg">
                            <div
                                @click="changeBg(port.ossPath + img.FilePath)"
                                class="panel-list-item-img"
                                v-for="(img, index) in bgImages"
                                :key="index"
                            >
                                <img
                                    :src="port.ossPath + img.FilePath + (img.FilePath.indexOf('.svg') > -1 ? '' : '!w280.src') "
                                    alt=""
                                >
                            </div>
                        </div>
                    </div>
                    <div class="panel-list" v-else>
                        <div class="local-upload" @click="handleColor('bg')">
                            <div class="local-upload-icon">
                                <i class="iconfont icon-tiaosepan_shixin"></i>
                            </div>
                            <div>调色盘</div>
                        </div>
                        <div class="panel-item-color">
                            <div class="panel-item-color-line">
                                <div
                                    @click="changeBg('', c)"
                                    class="color-block"
                                    :style="'background:' + c"
                                    v-for="c in RGBA"
                                    :key="c"
                                ></div>
                            </div>
                            <div class="panel-item-color-line">
                                <div class="color-block"
                                    v-for="item in RGB" :key="item"
                                    :style="'background:' + item"
                                    @click="changeBg('', item)"
                                ></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-bottom">
                    <span
                        @click="isConfirm(false)"
                        class="panel-bottom-icon iconfont icon-cha"
                        style="float:left; font-size: 4vmin;"
                    ></span>
                    <span>修改背景</span>
                    <span
                        @click="isConfirm(true)"
                        class="panel-bottom-icon iconfont icon-queding"
                        style="float: right; font-size: 6vmin;"
                    ></span>
                </div>
            </div>
            
            <!-- 文字功能面板 -->
            <div v-show="toolType == 'text'" key="text" class="panel">
                <div class="panel-top panel-top-overflow">
                    <!-- <span
                        @click="toggleTextType('lock')"
                        :class="['label-item iconfont icon-jiesuo', textToggle == 'lock' ? 'label-active' : '']"
                    ></span> -->
                    <span
                        @click="toggleTextType('content')"
                        :class="['label-item', textToggle == 'content' ? 'label-active' : '']"
                    >内容</span>
                    <span
                        @click="toggleTextType('font')"
                        :class="['label-item', textToggle == 'font' ? 'label-active' : '']"
                    >字体</span>
                    <span
                        @click="toggleTextType('color')"
                        :class="['label-item', textToggle == 'color' ? 'label-active' : '']"
                    >颜色</span>
                    <span
                        @click="toggleTextType('size')"
                        :class="['label-item', textToggle == 'size' ? 'label-active' : '']"
                    >大小</span>
                    <span
                        @click="toggleTextType('align')"
                        :class="['label-item', textToggle == 'align' ? 'label-active' : '']"
                    >对齐</span>
                    <span
                        @click="toggleTextType('style')"
                        :class="['label-item', textToggle == 'style' ? 'label-active' : '']"
                    >样式</span>
                </div>
                <div class="panel-content text-panel-content">
                    <!-- 修改内容 -->
                    <div v-show="textToggle == 'content'" class="show-text">
                        <!-- <textarea></textarea> -->
                        <div
                            v-html="activeTextContent"
                            class="modify-text"
                            @click="openDialogModel('change')"
                        ></div>
                    </div>
                    <!-- 字体 -->
                    <div v-show="textToggle == 'font'" class="font-list">
                        <div
                            @click="changeTextFamily(index)"
                            class="font-img"
                            v-for="(font, index) in familyList"
                            :key="index"
                        >
                            <img :src="port.ossPath + '/' + font.FontThumb" alt="">
                        </div>
                    </div>
                    <!-- 颜色 -->
                    <div v-show="textToggle == 'color'" class="panel-list">
                        <div class="local-upload">
                            <div class="local-upload-icon" @click="handleColor('text', RGBA[0])">
                                <i class="iconfont icon-tiaosepan_shixin"></i>
                            </div>
                            <div>调色盘</div>
                        </div>
                        <div class="panel-item-color">
                            <div class="panel-item-color-line">
                                <div
                                    class="color-block"
                                    @click="changeTextColor(c)"
                                    :style="'background:' + c"
                                    v-for="c in RGBA"
                                    :key="c"
                                ></div>
                            </div>
                            <div class="panel-item-color-line">
                                <div
                                    class="color-block"
                                    @click="changeTextColor(item)"
                                    :style="'background:' + item"
                                    v-for="item in RGB"
                                    :key="item"
                                ></div>
                            </div>
                        </div>
                    </div>
                    <!-- 大小 -->
                    <div v-show="textToggle == 'size'" class="text-size">
                        <span>大小:</span>
                        <!-- <mt-range v-model="textSize" :barHeight="3"></mt-range> -->
                        <!-- <span class="text-size-show">{{textSize}}</span>-->
                        <div style="width: 80%;">
                            <el-slider
                                @change="changeTextSize"
                                :min="20"
                                :max="200"
                                v-model="textSize"
                                show-input
                                :show-input-controls="false"
                                :show-tooltip="false"
                            ></el-slider>
                        </div>
                    </div>
                    
                    <!-- 对齐 -->
                    <div v-show="textToggle == 'align'" class="align-type">
                        <div class="align-item" @click="changeTextAlign('left')">
                            <i :class="['icon', 'iconfont', 'icon--2',  textObj.align == 'left' ? 'icon-active' : '']"></i>
                        </div>
                        <div class="align-item" @click="changeTextAlign('center')">
                            <i :class="['icon', 'iconfont', 'icon--1', textObj.align == 'center' ? 'icon-active' : '']"></i>
                        </div>
                        <div class="align-item" @click="changeTextAlign('right')">
                            <i :class="['icon', 'iconfont', 'icon--', textObj.align == 'right' ? 'icon-active' : '']"></i>
                        </div>
                    </div>
                    <!-- 样式 -->
                    <div v-show="textToggle == 'style'" class="align-type">
                        <div class="align-item" @click="changeTextStyle('itailic')">
                            <i :class="['icon', 'iconfont', 'icon-qingxie', textObj.itailic == 1 ? 'icon-active' : '']"></i>
                        </div>
                        <div class="align-item" @click="changeTextStyle('underline')">
                            <i :class="['icon', 'iconfont', 'icon-xiahuaxian', textObj.underline == 1 ? 'icon-active' : '']"></i>
                        </div>
                        <div class="align-item" @click="changeTextBlod()">
                            <i :class="['icon', 'iconfont', 'icon-bold', textObj.bold == 2 ? 'icon-active' : '']"></i>
                        </div>
                    </div>
                </div>
                <div class="panel-bottom" v-show="textToggle != 'content'">
                    <span
                        @click="isConfirm(false)"
                        class="panel-bottom-icon iconfont icon-cha"
                        style="float:left; font-size: 4vmin;"
                    ></span>
                    <span v-text="textTitle"></span>
                    <span
                        @click="isConfirm(true)"
                        class="panel-bottom-icon iconfont icon-queding"
                        style="float: right; font-size: 6vmin;"
                    ></span>
                </div>
            </div>
            <!-- 图片功能面板 -->
            <div v-show="toolType == 'image'" key="image" class="panel">
                <div class="panel-content">
                    <div class="img-panel-content">
                        <div class="img-active">
                            <img :src="activeImg" alt="">
                        </div>
                        <div class="img-right">
                            <div class="img-item " @click="handleImage('replace')">
                                <div class="img-panel-icon">
                                    <i style="font-size:25px;" class="iconfont icon-tihuan"></i>
                                </div>
                                <span>替换图片</span>
                            </div>
                            <div class="img-item " @click="clipImageBtn = true">
                                <div class="img-panel-icon">
                                    <i style="font-size:25px;" class="iconfont icon-caijian"></i>
                                </div>
                                <span>微调图片</span>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <!-- svg功能面板 -->
            <div v-show="toolType == 'svg'" key="svg" class="panel">
                <div v-if="false" class="panel-content">
                    <div class="img-panel-content">
                        
                        <div>
                            <div class="img-panel-icon"></div>
                            <span>替换图片</span>
                        </div>
                        <div>
                            <div class="img-panel-icon">
                                <i class="iconfont icon-tiaosepan_shixin"></i>
                            </div>
                            <span>替换颜色</span>
                        </div>
                    </div>
                </div>
                <div v-else style="height:100%">
                    <div class="panel-top-overflow">
                        <ul class="panel-top svg-color-list">
                            <li 
                                v-for="(color, i) in svgFillList" :key="i"
                                :style="{background: color}"
                                :class="['svg-item', svgFillIndex == i ? 'svg-item-active' : '']" 
                                @click="handleSelectSvg(i)"
                            ></li>
                        </ul>
                    </div>
                    <div class="panel-content">
                        <div class="panel-list">
                            <div class="local-upload" 
                                @click="handleColor('svg', svgFillList[svgFillIndex])"
                            >
                                <div class="local-upload-icon">
                                    <i class="iconfont icon-tiaosepan_shixin"></i>
                                </div>
                                <div>调色盘</div>
                            </div>
                            <div class="panel-item-color">
                                <div class="panel-item-color-line">
                                    <div class="color-block"
                                        v-for="c in RGBA" :key="c"
                                        :style="'background:' + c"
                                        @click="setSvgFill(c)"
                                    ></div>
                                </div>
                                <div class="panel-item-color-line">
                                    <div class="color-block"
                                        v-for="c in RGB" :key="c"
                                        :style="'background:' + c"
                                        @click="setSvgFill(c)"
                                    ></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-bottom">
                        <!-- <span
                            class="panel-bottom-icon iconfont icon-cha"
                            style="float:left; font-size: 4vmin;"
                        ></span> -->
                        <span>替换颜色</span>
                        <span
                            class="panel-bottom-icon iconfont icon-queding"
                            style="float: right; font-size: 6vmin;"
                            @click="toolType = 'all'"
                        ></span>
                    </div>
                </div>
            </div>
            
            </transition-group>
            <!-- 调色盘 -->
            <transition name="animation-down">
            <div v-show="colorPicker.show" key="colorShow" class="color-picker">
                <!-- <div class="color-picker-top color-picker-top-color">
                    <div>调色盘</div>
                    <div>
                        <span class="color-btn">取消</span>
                        <span class="color-btn">确定</span>
                    </div>
                </!--> 
                <div class="color-picker-content">
                    <div class="color-picker-item">
                        <chrome disableAlpha v-model="colorPicker.color" />
                    </div>
                </div>
                <div class="color-picker-bottom color-picker-top-color">
                    <span
                        class="panel-bottom-icon iconfont icon-cha"
                        style="float:left; font-size: 4vmin;"
                        @click="colorConfirmChoice(false)"
                    ></span>
                    <span>调色盘</span>
                    <span
                        class="panel-bottom-icon iconfont icon-queding"
                        style="float: right; font-size: 6vmin;"
                        @click="colorConfirmChoice(true)"
                    ></span>
                </div>
            </div>
            </transition>
            <!-- 添加图片 -->
            <transition name="animation-down">
            <div v-show="imgPicker.show" class="panel color-picker">
                <div class="panel-top-overflow">
                    <ul class="panel-top">
                        <li
                            @click="changeMaterialTypes(item, index)"
                            :class="['label-item', materialTypesIndex == index ? 'label-active': '']"
                            v-for="(item, index) in materialTypes"
                            :key="index"
                            :style="{'display': item.ID != 1? 'inline-block' : 'none'}"
                        >{{item.TypeName}}</li>
                    </ul>
                </div>
                <div class="panel-content" style="padding-right:0">
                    <div class="panel-list">
                        <div class="local-upload" @click="uploadImage('img')">
                            <div class="local-upload-icon">
                                <i class="iconfont icon-wushanguanwangziti-"></i>
                            </div>
                            <div>本地上传</div>
                        </div>
                        <div class="panel-list-item" @scroll="changeScroll" ref="imgList">
                            <div
                                class="panel-list-item-img"
                                v-for="(img, index) in materialTypesList"
                                :key="img.ID"
                                @click="chooseImage(port.ossPath + img.FilePath)"
                                
                            >
                                <img
                                    :src="port.ossPath + img.FilePath + (img.FilePath.indexOf('.svg') > -1 ? '' : '!w280.src') "
                                    alt=""
                                    @load="handleImgLoad($event , port.ossPath + img.FilePath , index)"
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-bottom">
                    <span class="panel-bottom-icon iconfont icon-cha" style="float:left; font-size: 4vmin;"
                        @click="imgConfirmChoice(false)"
                    ></span>
                    <span>选择图片</span>
                    <span class="panel-bottom-icon iconfont icon-queding" style="float: right; font-size: 6vmin;"
                        @click="imgConfirmChoice(true)"
                    ></span>
                </div>
            </div>
            </transition>
        </div>
        
        <DialogModel :open="dialogOpen">
            <div class="add-text-dialog">
                <div class="add-text-title">添加文字</div>
                <div class="add-textarea">
                    <textarea autofocus placeholder="请输入文字" v-model="addTextContent"></textarea>
                </div>
                <div class="add-text-btns">
                    <span class="cancel" @click="openDialogModel()">取消</span>
                    <span class="determine" @click="openDialogModel('yes')">确定</span>
                </div>
            </div>
        </DialogModel>
        <transition name="animation-right">
            <div class="save-model" v-if="saveTemplateBtn">
                <div class="close-btn">
                    <span class="iconfont icon-cha" @click="saveTemplateBtn = false"></span>
                </div>
                <div class="save-content">
                    <!-- <div v-for="(item, i) in pages" :key="i">
                        <img :src="item.Thumb || item.ThumbPath" alt="">
                    </div> -->
                    <van-swipe :autoplay="0">
                        <van-swipe-item v-for="(item, index) in pages" :key="index">
                            <img  :src="item.Thumb || item.ThumbPath" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="save-model-bottom">
                    <div>
                        <i class="el-icon-success"></i> 设计已保存到个人中心 <i class="el-icon-arrow-right"></i> 我的设计
                    </div>
                    <div>
                        <!-- <span class="save-model-btn">下载</span>
                        <span class="save-model-btn save-model-btn-print">下单印刷</span> -->
                    </div>
                </div>
            </div>
        </transition>
        <!-- 裁剪框 -->
        <div  class="save-model" v-if="clipImageBtn">
            <div class="clip-box-top">
                <vue-cropper autoCrop 
                :img="activeImg"
                outputType="png" 
                ref="cropper" centerBox/>
            </div>
            <div class="clip-box-bottom">
                <span style="font-size: 20px;" class="iconfont icon-cha"
                    @click="handleClip(false)"
                ></span>
                <span>裁剪图片</span>
                <span style="font-size: 28px;" class="iconfont icon-queding"
                    @click="handleClip(true)"
                ></span>
            </div>
        </div>
    </div>
</template>

<script src="./Home.js"></script>

<style lang="scss">
html,
body {
  height: 100%;
  overflow: hidden;
}
#app,
#design {
  height: 100%;
}
#design {
  .dsign-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: vw(285);
    animation: aly-up 1s;
    font-size: vw(26);
  }
  .index-title {
    text-align: center;
    font-size: vw(20);
    color: rgba(198, 198, 198, 1);
  }
  .index-content {
    display: flex;
    padding: 0 vw(100);
    justify-content: space-around;
    li {
      text-align: center;
    }
  }
  .index-icon {
    margin: vw(20) auto;
    width: vw(86);
    height: vw(86);
    line-height: vw(86);
    text-align: center;
    background: rgba(246, 244, 247, 1);
    border-radius: 50%;
    color: $primary;
    font-size: vw(40);
  }
  .add-icon {
    background: $primary;
    color: #fff;
  }
  .page-manage {
    position: relative;
    height: 100%;
    .page-top {
        display: flex;
        align-items: center;
      height: vw(60);
      line-height: vw(60);
      background: #f6f4f7;
      padding: 0 vw(30);
      .page-btn {
        display: inline-block;
        padding: 0 20px;
        height: 100%;
        text-align: center;
        color: $primary;
        font-size: 18px;
        border-radius: vw(5);
        &:active {
            background: #fff;
        }
      }
    }
    .page-content {
      display: flex;
      height: calc(100% - 8vmin);
      padding-bottom: 9vmin;
      padding-top: 1vmin;
      padding-left: vw(10);
      .page-content-item {
        width: vw(140);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: vw(10);
        background: #f3f4f9;
        margin-right: vw(10);
        border-radius: 3px;
        border: 2px solid transparent;
        svg {
          width: 100%;
          height: 100%;
        }
      }
      .page-acitve {
        border-color: $primary;
      }
    }
    .page-bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: vw(60);
      line-height: vw(60);
      text-align: center;
      font-size: vw(24);
      background: #f6f4f7;
      padding: 0 vw(30);
      .page-bottom-icon {
        color: $primary;
      }
    }
  }
  .add-select {
    position: relative;
    height: 100%;
    padding: vw(60) 25vmin;
    .select-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: vw(60);
      line-height: vw(60);
      text-align: center;
      color: $primary;
      background: #f6f4f7;
    }
    .select-item ul {
      display: flex;
      justify-content: space-around;
      li .select-item-icon {
        width: vw(86);
        height: vw(86);
        background: #f6f4f7;
        border-radius: 50%;
        text-align: center;
        line-height: vw(86);
        font-size: 5.5vmin;
        color: $primary;
        margin: 0 auto vw(20) auto;
      }
    }
  }
}
.add-text-dialog {
  width: vw(543);
  background: #fff;
  text-align: center;
  .add-textarea {
    margin-bottom: vw(26);
  }
  .add-textarea textarea {
    width: vw(460);
    height: vw(245);
    background: #f6f4f7;
    outline: none;
    border: none;
    resize: none;
    padding: 10px;
  }
  .add-text-btns {
    height: vw(80);
    font-size: vw(26);
    span {
      display: inline-block;
      width: 50%;
      height: 100%;
      line-height: vw(80);
    }
    span:active {
      opacity: 0.8;
    }
    .cancel {
      background: #d2d2d2;
    }
    .determine {
      background: $primary;
      color: #fff;
    }
  }
  .add-text-title {
    font-size: vw(28);
    padding: 3vmin;
  }
}
.panel {
  position: relative;
  height: 100%;

  .panel-top-overflow {
    position: absolute;
    width: 100vw;
    height: vw(60);
    line-height: vw(60);
    background: #F6F4F7;
    padding: 0 vw(30);
  }
  .panel-top {
    overflow-x: scroll;
    white-space: nowrap;
    .label-item {
      display: inline-block;
      padding: 0 2vw;
      height: 100%;
    }
  }
  .panel-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: vw(60);
    line-height: vw(60);
    text-align: center;
    font-size: vw(24);
    background: #f6f4f7;
    padding: 0 vw(30);
    .panel-bottom-icon {
      color: $primary;
    }
  }
  .panel-content {
    font-size: vw(22);
    height: 100%;
    padding: vw(60) vw(30);
    background: #fff;
    .local-upload {
      position: absolute;
      left: 0;
      width: vw(105);
      text-align: center;
      background: #f3f4f9;
      color: $primary;
      padding: 1vw;
      margin-right: 2vmin;
      .local-upload-icon {
        font-size: 10vw;
      }
    }
    .panel-list-item {
      overflow-x: scroll;
      .panel-list-item-img {
        display: inline-block;
        width: vw(135);
        height: vw(135);
        padding: vw(20);
        background: #f3f4f9;
        margin-right: vw(7.5);
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }
  .panel-list {
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    white-space: nowrap;
    padding-left: vw(115);
  }
  .panel-item-color {
    overflow-x: scroll;
    height: 100%;
    .panel-item-color-line {
      margin: 2.5vmin 0;
    }
    .color-block {
      display: inline-block;
      width: vw(55);
      height: vw(55);
      border: 1px solid rgba(238, 238, 238, 1);
      border-radius: vw(10);
      margin-right: vw(10);
    }
  }
  .show-text {
    height: 100%;
    padding: 2vmin 4vmin 0 0;
    .modify-text {
      width: 100%;
      height: 100%;
      background: #f3f4f9;
      outline: none;
      resize: none;
      border: none;
      padding: 10px;
    }
  }

  .font-img {
    width: vw(230);
    height: vw(60);
    padding: vw(5) 0;
    background: #f3f4f9;
    text-align: center;
    margin-right: vw(10);
    margin-bottom: vw(10);
    float: left;
    overflow: hidden;
    img {
      display: block;
      height: 100%;
      margin: 0 auto;
    }
  }
  .font-list {
    padding-top: vw(10);
    height: 100%;
    overflow-y: scroll;
  }
  .text-panel-content {
    padding-left: vw(30);
    padding-right: 0;
  }
  .text-size {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      width: 10%;
      font-size: vw(26);
    }
    .show-input {
      margin-right: 80px;
    }
    .el-slider__input {
      width: 60px;
    }
    .mt-range {
      width: 50%;
    }
    .text-size-show {
      display: inline-block;
      margin-left: vw(20);
      width: vw(100);
      height: vw(65);
      text-align: center;
      line-height: vw(65);
      border: 2px solid rgba(238, 238, 238, 1);
      border-radius: 5px;
    }
  }
  .align-type {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .align-item {
      width: vw(88);
      height: vw(88);
      text-align: center;
      line-height: vw(88);
      background: #f6f4f7;
      border-radius: vw(10);
      .icon {
        font-size: 25px;
      }
      .icon-active {
          color: $primary;
      }
    }

  }
  .img-panel-content {
    display: flex;
    justify-content: space-around;
    .img-active {
        width: vw(180);
        height: vw(180);
        background: #F3F4F9;
        padding: vw(20) vw(10);
        img {
            width: 100%;
            height: 100%;;
            object-fit: contain;
        }
    }
    .img-right {
        display: flex;
        align-items: center;
        margin-left: vw(60);
        flex: 1;
        .img-item {
            margin-left: vw(70);
        }
    }
    span {
      font-size: vw(26);
    }
    .img-panel-icon {
      width: vw(86);
      height: vw(86);
      line-height: vw(86);
      font-size: vw(42);
      color: $primary;
      background: #f6f4f7;
      border-radius: 50%;
      margin-bottom: vw(20);
      text-align: center;
    }
  }
  .svg-color-list {
    display: -webkit-box;
    height: 100%;
    align-items: center;
    padding-left: vw(10);
  }
  .svg-item {
    width: vw(32);
    height: vw(32);
    background: rgba(195, 140, 137, 1);
    border-radius: vw(5);
    margin-right: vw(30);
    box-sizing: content-box;
    border: 2px solid transparent;
  }
  .svg-item-active {
    border: 2px solid rgba(255, 255, 255, 1);
    box-shadow: 0px 0px vw(8) vw(2) rgba(196, 196, 196, 0.58);
  }
}
.label-active {
  color: $primary;
  background: #fff;
}
::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  display: none;
}
.save-model {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  text-align: center;
  .save-content {
      margin-top: 50px;
  }
  .save-model-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: vw(200);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .el-icon-success {
      color: #00b362;
    }
    .save-model-btn {
      display: inline-block;
      width: vw(250);
      height: vw(60);
      line-height: vw(60);
      border: 1px solid $primary;
      border-radius: vw(30);
      color: $primary;
    }
    .save-model-btn-print {
      background: $primary;
      color: #fff;
      margin-left: vw(60);
    }
  }
}
.editor {
  width: 100%;
  height: calc(100% - 38vmin - 12vmin);
  position: relative;
  background: #fbf0f0;
  animation: aly-scale 1s;
  overflow: hidden;
  #codebox {
    position: absolute;
    border: 1px solid #fff;
    .codebox-btn {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: 70%;
      background-position: center;
      img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
    }

    .lt,
    .lb,
    .rt,
    .rb {
        text-align: center;
    }

    .lt,
    .lb {
      left: -8px;
    }
    .lt,
    .rt {
      top: -8px;
    }
    .lb,
    .rb {
      bottom: -8px;
    }
    .rt,
    .rb {
      right: -8px;
    }
  }
}
#drawing {
  position: absolute;
  background: #fff;
}
.editor-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.iconfont.icon-wushanguanwangziti-,
.iconfont.icon-tiaosepan_shixin {
    font-size: 44px;
}
.iconfont.icon-yemian,
.iconfont.icon-beijing,
.iconfont.icon-ic_join_dialing_norm {
    font-size: 28px;
}

// 颜色选择器样式
.color-picker {
    position: absolute;
    left:0;
    top:0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.color-picker-top,
.color-picker-bottom {
    width: 100%;
    height: vw(60);
    background: #F6F4F7;
}
.color-picker-content {
    flex: 1;
}
.color-picker-top-color {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 vw(28);

}

.color-picker .color-picker {
    position: absolute;
    left: 0;
    top: -88px;
    width: 96%;
}
.color-picker .vc-chrome {
    width: 100%;
}
.vc-chrome-body {
    padding: 0;
}
.color-picker .vc-chrome-fields-wrap {
    display: none;
}
.color-picker .vc-chrome-saturation-wrap {
    padding-bottom: 23%;
}
.color-picker .vc-chrome-body {
    padding: vw(10) vw(30);
}

.clip-box-top {
    height: 100%;
    padding-bottom: 50px;
}
.clip-box-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

// 保存
.close-btn {
    position: absolute;
    left: 0;
    top: 0;

    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
</style>
